<template>
  <div>
    <a-row :gutter="24" style="width: 100%;background-color: #FFFFFF;margin: 0;padding: 10px 0px;margin-bottom: 5px;" class="knowledge-top-search">
      <a-col :md="15" :sm="12">
        <li class="know-top-nav diseaseKnowledge" :class="{'activity': isSelect[0]}" @click="switchTab(0)">疾病知识</li> 
        <li class="know-top-nav medicationRecommendations" :class="{'activity': isSelect[1]}" @click="switchTab(1)">用药建议</li>
        <li class="know-top-nav drugInformation" :class="{'activity': isSelect[2]}" @click="switchTab(2)">药品信息</li>
        <li class="know-top-nav inspectionInspection" :class="{'activity': isSelect[3]}" @click="switchTab(3)">检查检验</li>
        <li class="know-top-nav periodicalLiterature" :class="{'activity': isSelect[4]}" @click="switchTab(4)">期刊文献</li>
        <li class="know-top-nav medicalGraphicsLibrary" :class="{'activity': isSelect[5]}" @click="switchTab(5)">医学图形库</li>
        <li class="know-top-nav pastTypical" :class="{'activity': isSelect[6]}" @click="switchTab(6)">既往典型</li>
        <li class="know-top-nav clinicalExpert" :class="{'activity': isSelect[7]}" @click="switchTab(7)">临床专家</li>
      </a-col>
    </a-row>
    <div style="width: 100%;margin: 0;">
      <DiseaseKnowledge style="width: 100%;" v-show="isShowModel[0]"></DiseaseKnowledge>
      <MedicationRecommendations style="width: 100%;" v-show="isShowModel[1]"></MedicationRecommendations>
      <DrugInformation style="width: 100%;" v-show="isShowModel[2]"></DrugInformation>
      <InspectionInspection style="width: 100%;" v-show="isShowModel[3]"></InspectionInspection>
      <PeriodicalLiterature style="width: 100%;" v-show="isShowModel[4]"></PeriodicalLiterature>
      <MedicalGraphicsLibrary style="width: 100%;" v-show="isShowModel[5]"></MedicalGraphicsLibrary>
      <PastTypical style="width: 100%;" v-show="isShowModel[6]"></PastTypical>
      <ClinicalExpert style="width: 100%;" v-show="isShowModel[7]"></ClinicalExpert>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'

import ClinicalExpert from '../beforeLoginKnoelage/ClinicalExpert'//临床专家
import DiseaseKnowledge from '../beforeLoginKnoelage/DiseaseKnowledge'//疾病知识
import DrugInformation from '../beforeLoginKnoelage/DrugInformation'//药品信息
import InspectionInspection from '../beforeLoginKnoelage/InspectionInspection'//检查检验
import MedicalGraphicsLibrary from '../beforeLoginKnoelage/MedicalGraphicsLibrary'//医学图形库
import MedicationRecommendations from '../beforeLoginKnoelage/MedicationRecommendations'//用药建议
import PastTypical from '../beforeLoginKnoelage/PastTypical'//既往典型
import PeriodicalLiterature from '../beforeLoginKnoelage/PeriodicalLiterature'//期刊文献

export default {
  //这是主页
  name: 'KnowTopnav',
  components: {
    ClinicalExpert,
    DiseaseKnowledge,
    DrugInformation,
    InspectionInspection,
    MedicalGraphicsLibrary,
    MedicationRecommendations,
    PastTypical,
    PeriodicalLiterature,
  },
  data() {
    return {
      isActive: 0,
      url: {
        fuzzysearch: '/es/searchFull/getSearchDiseaseOrDrugsAll',
      },
      isShowModel: [true,false,false,false,false,false,false,false],
      isSelect: [true,false,false,false,false,false,false,false],
    }
  },
  created() {
    let topactive = this.$route.path.slice(15)
    getAction(this.url.fuzzysearch, { searchName: '科', searchType: 2 }).then(res => {
      if (res.success) {
        document.querySelector('.'+this.$route.path.slice(15)).style.color = '#38c3c8'
      }
      if (res.code === 510) {
        this.$message.warning(res.message)
      }
      this.loading = false
    })
  },
  methods: {
    switchTab(itemId){
      this.isShowModel = [false,false,false,false,false,false,false,false];
      this.isSelect = [false,false,false,false,false,false,false,false];
      this.isShowModel[itemId] = true;
      this.isSelect[itemId] = true;
    },
    cli() {
      console.log(this.$refs.diseaseKnowledge)
    }
  }
}
</script>

<style lang="scss">
.knowledge-top-search {
  li {
    font-size: 16px;
    display: inline;
    margin-right: 35px;
    list-style:none;
    color: #333;
  }
  .activity{
    color: #38C3C8;
  }
}
.table-page-search-wrapper{
  margin-left: 0px !important;
}
.classification-details{
  margin-left: 0px !important;
}
.know-top-nav{
  cursor: pointer;
}
</style>